<template>
  <div class="hello">
    {{text}}
   
  <slot-temp ref="slotComp">
    <!-- <p slot="niubi">niubi</p>
    <p slot="buniubi">buniubi</p> -->
    <p>作用于插槽</p>
  <p slot-scope="props">{{props.value}}</p>
  </slot-temp>
  <router-link to="/life">niubiniubi</router-link>
  </div>
</template>

<script>
import slotTemp from '@/components/slot'

export default {
  beforeRouteEnter (to, from, next) {
    // ...
    //对数据的获取或者操作在next的回调中操作
    next(vm=>{
      vm.text=5
    })
  },
  // beforeRouteUpdate(to, from, next) {
  //   next()
  // },
  // beforeRouteLeave (to, from, next) {
  //   next()
  // },
  name: 'HelloWorld',
  components:{
    slotTemp:slotTemp
  },
  data () {
    return {
      text:1
    }
  },
  mounted(){
    setInterval(() => {
      this.text += 1
    }, 1000);
    // console.log(this.$);
    
    
  },
  watch:{ 
    text(newText,oldText){
      // console.log(`${newText} :${oldText}`);
      
    }
  },
      render(createElement){
        // 这个是最后一节课讲渲染函数的 

// 这个也可以在参数中直接声明
        // return this.$createElement()
        return createElement(
            // 就是一个从外到内的创建过程
            'slot-temp',{
              ref:'slotComp'
            },
            // 如果创建对象需要携带值,应该用数组形式
            [
              createElement('span',{ref:'span'},this.value)
            ]
        )

    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
